import React from "react";

import UE from './ueditor/ueditor.all';
import ZeroClipboard from './ueditor/third-party/zeroclipboard/ZeroClipboard';


class UEditor extends React.Component {

  static defaultProps = {
    config: {
      toolbars: [
        ['fullscreen', 'source', 'undo', 'redo'],
        ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'fontfamily', //字体
          'fontsize', 'pasteplain', 'forecolor', 'backcolor', 'insertunorderedlist', 'link', 'unlink', '|', 'time', 'date', 'insertimage', 'emotion', 'selectall', 'cleardoc']
      ]
    }
  }

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    this.initEditor()
  }

  componentWillUnmount() {
    // 组件卸载后，清除放入库的id
    UE.delEditor(this.props.id);
  }

  initEditor() {
    const { id, config } = this.props;
    const ueEditor = UE.getEditor(this.props.id, config);
    const self = this;

    ueEditor.ready((ueditor) => {
      if (!ueditor) {
        UE.delEditor(id);
        self.initEditor();
      }
    })
  }

  render() {
    let name = this.props.name?this.props.name:"content";
    return (
      <div id={this.props.id} name={name} type="text/plain"></div>
    )
  }

}

export default UEditor;